<template>
    <el-drawer
    class="drawer-normal"
    :visible.sync="drawer"
    title="余额变动明细"
    size="60%"
    :direction="direction"
    :before-close="handleClose">
        <div class="content">
            <el-tabs type="border-card" v-model="active">
                <!-- 2 -->
                <el-tab-pane label="余额明细" name="1">
                    <user-balance ref="balance"></user-balance>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-drawer>
</template>

<script>
import UserBalance from '@/components/userInfo/balance.vue';
export default {
  components: {
    UserBalance,//余额明细
  },
  data() {
    return {
      that: this,
      active: "1",
      drawer: false,
      direction: 'rtl',
      size: '',
    };
  },
  mounted() {
  },
  methods: {
    getData(userPhone) {
      this.drawer = true
          this.$nextTick(() => {
            this.$refs.balance.getData(10, 1, userPhone)
            this.$refs.balance.clearFilter()
       });  
    },

    handleClose() {
      this.drawer = false
    },
  },
}
</script>
<style scoped>
.head-container {
	margin-bottom: 20px;
}
.content{
    padding:0 20px;
}
::v-deep .el-descriptions-item__label{
    width: 18%!important;
}
</style>
